<template>
  <div class="display-index-display" :style="{'grid-template-columns':sidebar+' auto'}">
    <top name="名字" />
    <menus @expand="itemHoverHandle" @selector="breadContent"></menus>
    <el-main class="p_contain">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/employee' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{content}}</el-breadcrumb-item>
      </el-breadcrumb>
      <hr style="width: 10vw; margin: 5px 0;"/>
      <el-main style="padding: 5px">
        <router-view/>
      </el-main>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import {type Ref, ref, type UnwrapRef} from "vue"
import {ArrowRight} from "@element-plus/icons-vue"
import top from './display/header/index.vue'
import menus from './display/aside/index.vue'
import {delay} from "@/utils/utils.ts";
// const props = defineProps({
//
// })
const sidebar:Ref<UnwrapRef<string> | string> = ref("60px")
const content:Ref<UnwrapRef<string> | string> = ref("员工资料")

const change = delay((value:string)=>{
    sidebar.value = value
})

const itemHoverHandle = (open:boolean)=>{
  if (open){
    change(10,'200px')
  }else{
    change(10,'60px')
  }
}
const breadContent = (text:string)=>{
  content.value = text
}

</script>

<style scoped lang="scss">
  .display-index-display{
    display: grid;
    grid-template-rows: 60px auto;
    grid-template-columns: minmax(50px,200px) auto;
    transition: .3s;
    height: 100vh;
  }
  .menus{
    display: inline-grid;
    grid-template-rows: repeat(auto-fill,50px);
    grid-template-columns: 100%;
    background-color: $sidebar-bg-color;
    color: #1e2e41;
    box-sizing: border-box;
  }
  .el-breadcrumb{
    cursor: pointer;
  }
  span{
    cursor: default;
  }
  .p_contain{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 20px 12px auto;
    padding: 10px 0 0 10px;
  }
</style>